<template>
    <button class="hq-button" :class="className" :style="isround">
        <i :class="icon" v-if="icon"></i>
        <slot>{{title}}</slot>
    </button>
</template>

<script>
export default {
    name: 'hq-button',
    data () {
        return {
        }
    },
    props: {
        title: { // 组件显示的文字
            type: String,
            default: () => {
                return 'button';
            }
        },
        icon: { // 组件显示的图标（可选）
            type: String,
            default: () => {
                return '';
            }
        },
        type: { // 组件类型，（可选）主要是背景色的不同（可选值："primary", "danger")
            type: String,
            default: () => {
                return 'default';
            }
        },
        size: { // 组件的大小  （可选）（可选值："normal", "small",  "large")
            type: String,
            default: () => {
                return 'normal';
            }
        },
        round: { // 组件的大小  （可选）（可选值："normal", "small",  "large")
            type: String,
            default: "round"
        },
    },
    methods: {
        buttonClick (ev) {
            this.$emit('click', 1)
        },
        buttonEnter (ev) {
            this.$emit('enter', 1)
        }
    },
    computed: {
        className () {
            return this.type + ' ' + this.size;
        },
        isround () {
            return this.round === "" ? { "border-radius": this.borderValue + 'px' } : {}
        },
        borderValue () {
            switch (this.size) {
                case "small":
                    return 14
                case "medium":
                    return 16
                case "large":
                    return 20
                default:
                    return 18
            }
        }

    }
}
</script>

<style lang="less">
@selectors: {
        @primary: {
            hover: #66b1ff;
            active: #3a8ee6;
            default: #409eff;
        };

        @danger: {
            hover: #f78989;
            active: #dd6161;
            default: #f56c6c;
        };

        @info: {
            hover: #a6a9ad;
            active: #82848a;
            default: #909399;
        };

        @warning: {
            hover: #e6a23c;
            active: #cf9236;
            default: #e6a23c;
        };

        @success: {
            hover: #85ce61;
            active: #5daf34;
            default: #67c23a;
        };
    };
    .output(@key,@value) when not (@key = default) {
        background-color: @value;
    }
// @selectors: {
//     primary: #409eff;
//     danger: #f56c6c;
//     info: #909399;
//     warning: #e6a23c;
//     success: #67c23a;
// };
// @selectors-hover: {
//     primary: #66b1ff;
//     danger: #f78989;
//     info: #a6a9ad;
//     warning: #e6a23c;
//     success: #85ce61;
// };
// @selectors-active: {
//     primary: #3a8ee6;
//     danger: #dd6161;
//     info: #82848a;
//     warning: #cf9236;
//     success: #5daf34;
// };
// each(@selectors, {
//             &.@{key} {
//                 background-color: @value;
//                 color: #fff;

//             }
//         });
// each(@selectors-hover, {
//             &.@{key} {
//                    &:hover {
//                         background: @value;
//                     }
//             }
//         });
// each(@selectors-active, {
//             &.@{key} {
//                    &:active {
//                         background: @value;
//                     }
//             }
//         });

.hq-button {
    outline: none;
    background-color: #fff;
    color: #333;
    border: 1px solid #eee;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    i {
        margin: 0 4px;
    }
    &.default {
        background-color: #fff;
        &:hover {
            color: #4091ff;
            background-color: #ecf5ff;
        }
        &:active {
            border-color: #3a8ee6;
        }
    }
    &.large {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        width: 104px;
    }
    &.normal {
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        width: 98px;
    }
    &.medium {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        width: 80px;
    }
    &.small {
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        width: 80px;
    }
    each(@selectors, {
        @str: replace(@key, "@", '');
        &.@{str} {
            background-color: @value[default];
            color: #fff;
            each(@value, {
                    @str1: e('&:@{key}');
                    @{str1} {
                        .output(@key,@value);
                    }
                }

            );
        }
    }
);
}
</style>
